
import * as echarts from 'echarts';
export const badnessOption = {
  tooltip: {
    trigger: 'item',
    extraCssText: 'z-index: 1000;', // 设置tooltip的z-index
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '3%',
    containLabel: true
  },
  graphic: [{
      type: "text",
      left: "center",
      top: "25%",
      style: {
        text: '出库',
        textAlign: "center",
        fill: "#707070",
        fontSize: 18,
        fontWeight: 700
      }
    },
    {
      type: "text",
      left: "center",
      top: "40%",
      style: {
        text: 25,
        textAlign: "center",
        fill: "#23B500",
        fontSize: 13,
        fontWeight: 700
      }
    },
    {
      type: "text",
      left: "center",
      top: "50%",
      style: {
        text: "已完成",
        textAlign: "center",
        fill: "#23B500",
        fontSize: 12,

      }
    },
    {
      type: "text",
      left: "center",
      top: "60%",
      style: {
        text: 75,
        textAlign: "center",
        fill: "#0085D5",
        fontSize: 13,
        fontWeight: 700
      }
    },
    {
      type: "text",
      left: "center",
      top: "70%",
      style: {
        text: "未完成",
        textAlign: "center",
        fill: "#0085D5 ",
        fontSize: 12,

      }
    },
  ],
  series: [{
    name: '当日出库任务完成情况',
    type: 'pie',
    radius: ['70%', '95%'],
    itemStyle: {
      borderRadius: 0,
      borderColor: '#fff',
      borderWidth: 0
    },
    label: {
      show: false,
      position: 'center'
    },
    data: [{
        value: 25,
        name: '已完成',
        itemStyle: {
          color: '#1FB264'
        }
      },
      {
        value: 75,
        name: '未完成',
        itemStyle: {
          color: '#0085D5'
        }
      },

    ],

    label: {
      normal: {
        show: false,
        position: 'inside', //标签的位置
        formatter: "出库",
        textStyle: {
          color: '#fff',
        }
      },
    }
  }],
}
export const badnessOptions = {
  tooltip: {
    trigger: 'item',
    extraCssText: 'z-index: 1000;', // 设置tooltip的z-index
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '3%',
    containLabel: true
  },
  graphic: [{
      type: "text",
      left: "center",
      top: "25%",
      style: {
        text: '入库',
        textAlign: "center",
        fill: "#707070",
        fontSize: 18,
        fontWeight: 700
      }
    },
    {
      type: "text",
      left: "center",
      top: "40%",
      style: {
        text: 25,
        textAlign: "center",
        fill: "#23B500",
        fontSize: 13,
        fontWeight: 700
      }
    },
    {
      type: "text",
      left: "center",
      top: "50%",
      style: {
        text: "已完成",
        textAlign: "center",
        fill: "#23B500",
        fontSize: 12,

      }
    },
    {
      type: "text",
      left: "center",
      top: "60%",
      style: {
        text: 75,
        textAlign: "center",
        fill: "#0085D5",
        fontSize: 13,
        fontWeight: 700
      }
    },
    {
      type: "text",
      left: "center",
      top: "70%",
      style: {
        text: "未完成",
        textAlign: "center",
        fill: "#0085D5",
        fontSize: 12,

      }
    },
  ],
  series: [{
    name: '当日入库任务完成情况',
    type: 'pie',
    radius: ['70%', '95%'],
    itemStyle: {
      borderRadius: 0,
      borderColor: '#fff',
      borderWidth: 0
    },
    label: {
      show: false,
      position: 'center'
    },
    data: [{
        value: 25,
        name: '已完成',
        itemStyle: {
          color: '#1FB264'
        }
      },
      {
        value: 75,
        name: '未完成',
        itemStyle: {
          color: '#0085D5'
        }
      },

    ],

    label: {
      normal: {
        show: false,
        position: 'inside', //标签的位置
        formatter: "出库",
        textStyle: {
          color: '#fff',
        }
      },
    }
  }],
}


export const badnessAreaOption = {
  title: {
    show:false,
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    show:true,
    trigger: 'item',
    formatter: (val)=>{
      return val.name +'&emsp;'+val.value
    },
  },
//   legend: {
//         orient: 'vertical',
//         x:'right',
//         y:'center',
//         itemGap:10,
//         itemWidth:20,

//     left: 'right'
//   },
  series: [
    {
      name: '时长统计',
      type: 'pie',
      radius: '80%',
      left:0,
      data: [
        { value: 1048, name: '0-30分钟',itemStyle:{color:'#0085D5'} },
        { value: 735, name: '31-60分钟' ,itemStyle:{color:'#23B500'}},
        { value: 580, name: '61-90分钟' ,itemStyle:{color:'#F2BC7D'}},
        { value: 300, name: '120分钟以上' ,itemStyle:{color:'#A3DFEF'}},
        { value: 484, name: '91-120分钟' ,itemStyle:{color:'#F99600'}}
      ],
      label: {
        normal: {
            show: true,
            position: 'inner',
            formatter: '{c}',
            color:'#FFF',
            fontWeight:550
            },
        },
          labelLine:{  //删除指示线
              show:false
            },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
export const lineOption = {
  grid: {

    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    show:true,
    trigger: 'item',
    formatter: (val)=>{
      return '库存周转率'+'<br/>'+ val.name +'&emsp;'+(val.value+"%")
    },
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      lineStyle: {
        color: '#2E65FD',
        width: 1,
        type: 'solid'
    },
    symbol:"circle",
    itemStyle: {
        normal: {
            color: '#1592E6', // 调整实心点的颜色为蓝色
            borderColor: '#1592E6', // 调整实心点边框的颜色为黄色
            borderWidth: 2 // 实心点边框宽度
        }
    }
    }
  ]
}

export const barOption = {
  grid: {
    left: '1%',
    right: '3%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: "{b0}: {c0}",
    /*formatter: function(params) {
            var result = '';
            params.forEach(function (item) {
                result += item.marker + " " + item.seriesName + " : " + item.value +"</br>";
            });
            return result;
        }*/
  },
  xAxis: {
    show: false, //是否显示x轴
    type: "value",
  },
  yAxis: {
    type: "category",
    inverse: true, //让y轴数据逆向
    axisLabel: {
      show: true,
      textStyle: {
        color: "#00051C", //y轴字体颜色
      },
      formatter: function (value, index) {
        return ["{lg|" + "}" + "{title|" + value + "} "].join(
          "\n"
        );
      },
      //定义富文本标签
      rich: {
        lg: {
          fontWeight: "bold",
          fontSize: 14, //字体默认12
          color: "#00051C",
          padding: [0, 5, 0, 0],
        },
        title: {
          color: "#00051C",
          fontWeight: "lighter",
          // borderWidth: 1,
          // borderColor: '#08c'
          // textareaBorderColor: '#08c',
        },
      },
    },
    splitLine: { show: false }, //横向的线
    axisTick: { show: false }, //y轴的端点
    axisLine: { show: false }, //y轴的线
    data: [],
  },
  series: [
    {
      name: "数据内框",
      type: "bar",
      itemStyle: {
        normal: {
          barBorderRadius: 50,
          label: {
									show: true, //开启显示
									position: 'right',
                  // position:['150%', '5%'],
									textStyle: { //数值样式
										color: 'black',
										fontSize: 12
									}
								},
          color: function (params){
                        var colorList = ['#A3DFEF','#84CFA7','#F2BC7D','#636FEC','#0085D5','#23B500','#FF8900'];
                        return colorList[params.dataIndex];
                    },
        },
      },
      /*label: {
                normal: {
                    show: true,
                    position: 'right',
                    color: 'red',
                    fontSize: 14,
                    formatter:
                    function(param) {
                        // return 'xx';
                    },
                }
            },*/
      barWidth: 10,
      data: [11, 33],
    },
    {
      name: "外框",
      type: "bar",
      itemStyle: {
        normal: {
          barBorderRadius: 50,
          color: "rgba(247, 248, 252, 1)", //rgba设置透明度0.14
        },
      },
      barGap: "-100%",
      z: 0,
      barWidth: 10,
      data: [100, 100, 100, 100, 100],
    },
  ],
}


// 物料
export const materilaOption = {
    grid: {
        left: '1%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['计划', '领料', '退料','差异率'],
      top:12,
      left:'33%'
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        name: '',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '计划',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: [

        ],
        itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从上到下
                  [
                      { offset: 0, color: '#8CD2FD' },   // 柱图渐变色
                      { offset: 1, color: '#5D9EFF' }    // 柱图渐变色
                  ]
              )
          }
      },
          {
        name: '领料',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: [

        ],
        itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从上到下
                  [
                      { offset: 0, color: '#23B500' },   // 柱图渐变色
                      { offset: 1, color: '#2BCA05' }    // 柱图渐变色
                  ]
              )
          }
      },
          {
        name: '退料',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: [

        ],
              itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从上到下
                  [
                      { offset: 0, color: '#F5AB00' },   // 柱图渐变色
                      { offset: 1, color: '#F5AB00' }    // 柱图渐变色
                  ]
              )
          }
      },

      {
        name: '差异率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%';
          }
        },
        symbol:"circle",
        data: [],
        itemStyle:{
        color:'#0085D5',
        normal: {
              color: '#1592E6', // 调整实心点的颜色为蓝色
              borderColor: '#1592E6', // 调整实心点边框的颜色为黄色
              borderWidth: 2 // 实心点边框宽度
          }
        }
      }
    ]
  };


  // 呆滞物料占比TOP10
  export const dzption = {
    legend: {
      data: ['正常物料', '呆滞物料', '呆滞占比'],
      left: 'center',
      top:12
    },
    grid: {
      left: '1%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {},
    xAxis: {
      data: [],
      name: '',
      axisLine: { onZero: true },
      splitLine: { show: false },
      splitArea: { show: false }
    },
    yAxis: [
          {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}'
        }
      },
        {
        type: 'value',
        name: '',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],

    series: [
      {
        name: '正常物料',
        type: 'bar',
        stack: 'one',
        barWidth:24,
        itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从上到下
                  [
                      { offset: 0, color: '#8CD2FD' },   // 柱图渐变色
                      { offset: 1, color: '#5D9EFF' }    // 柱图渐变色
                  ]
              )
          },
        data: []
      },
      {
        name: '呆滞物料',
        type: 'bar',
        stack: 'one',
         barWidth:24,
        itemStyle: {
            color: '#23B500'
        },
        data: []
      },
       {
        name: '呆滞占比',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%';
          }
        },
        symbol:"circle",
        data: [],
        itemStyle:{
        color:'#0085D5',
        normal: {
              color: '#1592E6', // 调整实心点的颜色为蓝色
              borderColor: '#1592E6', // 调整实心点边框的颜色为黄色
              borderWidth: 2 // 实心点边框宽度
          }
        }
      }
    ]
  };

    // 超期物料占比TOP10
    export const cqption = {
        legend: {
          data: ['正常物料', '超期物料', '超期占比'],
          left: 'center',
          top:12
        },
        grid: {
            left: '1%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
        tooltip: {},
        xAxis: {
          data: [],
          name: '',
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false }
        },
        yAxis: [
              {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value}'
            }
          },
            {
            type: 'value',
            name: '',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],

        series: [
          {
            name: '正常物料',
            type: 'bar',
            stack: 'one',
            barWidth:24,
            itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1, // 渐变方向从上到下
                      [
                          { offset: 0, color: '#8CD2FD' },   // 柱图渐变色
                          { offset: 1, color: '#5D9EFF' }    // 柱图渐变色
                      ]
                  )
              },
            data: []
          },
          {
            name: '超期物料',
            type: 'bar',
            stack: 'one',
             barWidth:24,
            itemStyle: {
                color: '#23B500'
            },
            data: []
          },
           {
            name: '超期占比',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '%';
              }
            },
            symbol:"circle",
            data: [],
            itemStyle:{
            color:'#0085D5',
            normal: {
                  color: '#1592E6', // 调整实心点的颜色为蓝色
                  borderColor: '#1592E6', // 调整实心点边框的颜色为黄色
                  borderWidth: 2 // 实心点边框宽度
              }
            }
          }
        ]
      };
